<!-- Prompt cards -->
<ul
  role="list"
  class="grid grid-cols-1 gap-6 text-slate-900 dark:text-slate-200 sm:grid-cols-2 lg:grid-cols-2"
>
  <li class="col-span-1 rounded-lg bg-slate-50 shadow dark:bg-slate-900">
    <div class="flex w-full items-center justify-between space-x-6 p-6">
      <button class="group flex-1 truncate">
        <div class="flex items-center space-x-3">
          <h3
            class="truncate text-sm font-medium text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-200 dark:group-hover:text-blue-600"
          >
            Linux Terminal
          </h3>
        </div>
        <p class="mt-1 truncate text-sm text-slate-500">
          I want you to act as a linux terminal. I will type commands and you
          will reply with what the terminal should show.
        </p>
      </button>
      <button
        class="flex flex-shrink-0 flex-col items-center gap-y-1 rounded-lg p-1 text-xs transition-colors hover:text-blue-600 focus:text-blue-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"
          ></path>
        </svg>
        <span>23</span>
      </button>
    </div>
  </li>
  <li class="col-span-1 rounded-lg bg-slate-50 shadow dark:bg-slate-900">
    <div class="flex w-full items-center justify-between space-x-6 p-6">
      <button class="group flex-1 truncate">
        <div class="flex items-center space-x-3">
          <h3
            class="truncate text-sm font-medium text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-200 dark:group-hover:text-blue-600"
          >
            Travel Guide
          </h3>
        </div>
        <p class="mt-1 truncate text-sm text-slate-500">
          I want you to act as a travel guide. I will write you my location and
          you will suggest a place to visit near my location.
        </p>
      </button>
      <button
        class="flex flex-shrink-0 flex-col items-center gap-y-1 rounded-lg p-1 text-xs transition-colors hover:text-blue-600 focus:text-blue-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"
          ></path>
        </svg>
        <span>10</span>
      </button>
    </div>
  </li>

  <li class="col-span-1 rounded-lg bg-slate-50 shadow dark:bg-slate-900">
    <div class="flex w-full items-center justify-between space-x-6 p-6">
      <button class="group flex-1 truncate">
        <div class="flex items-center space-x-3">
          <h3
            class="truncate text-sm font-medium text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-200 dark:group-hover:text-blue-600"
          >
            English Pronunciation Helper
          </h3>
        </div>
        <p class="mt-1 truncate text-sm text-slate-500">
          I want you to act as an English pronunciation assistant for Turkish
          speaking people. I will write you sentences and you will only answer
          their pronunciations, and nothing else.
        </p>
      </button>
      <button
        class="flex flex-shrink-0 flex-col items-center gap-y-1 rounded-lg p-1 text-xs transition-colors hover:text-blue-600 focus:text-blue-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"
          ></path>
        </svg>
        <span>4</span>
      </button>
    </div>
  </li>
  <li class="col-span-1 rounded-lg bg-slate-50 shadow dark:bg-slate-900">
    <div class="flex w-full items-center justify-between space-x-6 p-6">
      <button class="group flex-1 truncate">
        <div class="flex items-center space-x-3">
          <h3
            class="truncate text-sm font-medium text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-200 dark:group-hover:text-blue-600"
          >
            Educational Content Creator
          </h3>
        </div>
        <p class="mt-1 truncate text-sm text-slate-500">
          I want you to act as an educational content creator. You will need to
          create engaging and informative content
        </p>
      </button>
      <button
        class="flex flex-shrink-0 flex-col items-center gap-y-1 rounded-lg p-1 text-xs transition-colors hover:text-blue-600 focus:text-blue-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"
          ></path>
        </svg>
        <span>0</span>
      </button>
    </div>
  </li>
</ul>
